import React, { Component } from 'react'
import { Avatar, List, Modal, Popconfirm } from 'antd'
import { requestMsgList, removeMsg } from '../../api/message'
import { connect } from 'react-redux'
import QueueAnim from 'rc-queue-anim'

class ShowMsg extends Component {
    state = {
        show: true,
        initLoading: true,
        listHeight: window.innerHeight - 200,
        previewVisible: false,
        html: '',
        list: []
    }
    onClick = () => {
        this.setState({
            show: !this.state.show
        })
    }

    componentDidMount () {
        this.init()
    }

    previewCancel () {
        this.setState({
            previewVisible: false
        })
    }

    init () {
        requestMsgList().then(res => {
            this.setState({
                list: res.data,
                initLoading: false
            })
        })
    }

    preview (html) {
        this.setState({
            previewVisible: true,
            html
        })
    }

    delete (msgid) {
        removeMsg(msgid).then(res => {
            console.log(res)
            this.init()
        })
    }

    render () {
        const element=<>
            <List
                className="demo-loadmore-list"
                loading={this.state.initLoading}
                itemLayout="horizontal"
                dataSource={this.state.list}
                style={{ height: this.state.listHeight, overflow: 'auto' }}
                pagination={{
                    onChange: page => {
                        console.log(page)
                    },
                    pageSize: 10,
                }}
                rowKey={record => {
                    return record.msgid
                }}
                renderItem={item => (
                    <List.Item
                        // eslint-disable-next-line
                        actions={[<a key="list-loadmore-edit" onClick={this.preview.bind(this, item.html)}>预览</a>,
                            <Popconfirm title="确认删除？" onConfirm={this.delete.bind(this, item.msgid)}>
                                {/*eslint-disable-next-line*/}
                                <a key="list-loadmore-more">删除</a>
                            </Popconfirm>
                        ]}
                    >
                        <List.Item.Meta
                            avatar={<Avatar src={item.avatar}/>}
                            title={item.title}
                            description={item.description}
                        />
                    </List.Item>
                )}
            />
            <Modal width={800} visible={this.state.previewVisible} footer={null}
                   onCancel={this.previewCancel.bind(this)}>
                <div dangerouslySetInnerHTML={{ __html: this.state.html }} style={{ overflow: 'hidden' }}/>
            </Modal>
        </>

        return (
            <QueueAnim className="demo-content" key="demo">
                {this.props.show ? <div className="demo-tbody" key="a">{element}</div> : null}
            </QueueAnim>
        )
    }
}

export default connect((state) => {
    return {
        show: state.getIn(['fade', 'show'])
    }
})(ShowMsg)
